<template>
     <div >
    <h1>state1获取当前计数器1：{{ count }}</h1>
     <!-- this.$store.state.全局数据名称获取值 -->
    <h1>state1获取当前计数器2：{{ $store.state.count }}</h1>
	<h1>state1获取当前计数器2：{{ $store.state.a.countA }}</h1>
    <h1>mapState1当前数量：{{ num }}</h1>
	 <h1>mapState2当前数量：{{ xCount }}</h1>
	<h1>mapState3当前数量：{{ xNum }}</h1>
	<h1>mapState4当前数量：{{ countAdd }}</h1>
	<h1>mapState4当前数量：{{ showNum }}</h1>
  </div>
</template>

<script>

import { mapState, mapGetters } from 'vuex';

export default ({
	name: 'VuexState',
	data () {
		return {
			count: this.$store.state.count
		};
	},
	props: {
		msg: String
	},
	computed: {
		// mapState 可以接收数组或对象形式的参数 映射为计算属性，下面分别示例
		// 2.1 传入数组
		...mapState(['num', 'count']),
		// 2.2 对象形式 可以自定义名称
		...mapState({
			xCount: state => state.count,
			xNum: state => state.num,
			countAdd: function (state) {
				return state.count;
			}
		}),
		...mapGetters(['showNum'])

	}
});
</script>
